<div class="idps-title-row">
  <h2>{{ 'DESCRIPTIONS.SETTINGS.IDPS.TITLE' | translate }}</h2>
  <a mat-icon-button href="https://zitadel.com/docs/guides/integrate/identity-providers" rel="noreferrer" target="_blank">
    <mat-icon class="icon">info_outline</mat-icon>
  </a>
</div>
<p class="idps-description cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IDPS.DESCRIPTION' | translate }}</p>
<div class="cnsl-idp-table-wrapper">
  <cnsl-idp-table [service]="service" [serviceType]="serviceType"></cnsl-idp-table>
</div>

<h2>{{ 'IDP.CREATE.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>

<div class="new-idp-wrapper">
  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'google', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'google', 'create']
          : []
    "
  >
    <img class="idp-logo" src="./assets/images/idp/google.png" alt="google" />
    <div class="text-container">
      <span class="title">Google</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'azure-ad', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'azure-ad', 'create']
          : []
    "
  >
    <img class="idp-logo" src="./assets/images/idp/ms.svg" alt="microsoft" />
    <div class="text-container">
      <span class="title">Microsoft</span>
    </div>
  </a>

  <a
    class="item card"
    matRipple
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'github', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'github', 'create']
          : []
    "
  >
    <img class="idp-logo dark" src="./assets/images/idp/github-dark.svg" alt="GitHub" />
    <img class="idp-logo light" src="./assets/images/idp/github.svg" alt="GitHub" />

    <div class="text-container">
      <span class="title">GitHub</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'github-es', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'github-es', 'create']
          : []
    "
  >
    <img class="idp-logo dark" src="./assets/images/idp/github-dark.svg" alt="GitHub" />
    <img class="idp-logo light" src="./assets/images/idp/github.svg" alt="GitHub" />

    <div class="text-container">
      <span class="title">GitHub Enterprise Server</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'gitlab', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'gitlab', 'create']
          : []
    "
  >
    <img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="GitLab" />
    <div class="text-container">
      <span class="title">GitLab</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'gitlab-self-hosted', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'gitlab-self-hosted', 'create']
          : []
    "
  >
    <img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="GitLab" />
    <div class="text-container">
      <span class="title">GitLab Self Hosted</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'apple', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'apple', 'create']
          : []
    "
  >
    <img class="idp-logo apple dark" src="./assets/images/idp/apple-dark.svg" alt="Apple" />
    <img class="idp-logo apple light" src="./assets/images/idp/apple.svg" alt="Apple" />
    <div class="text-container">
      <span class="title">Apple</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'oidc', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'oidc', 'create']
          : []
    "
  >
    <div class="idp-icon">
      <mat-icon class="icon" svgIcon="mdi_openid" alt="openid" />
    </div>
    <div class="text-container">
      <span class="title">Generic OIDC</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'oauth', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'oauth', 'create']
          : []
    "
  >
    <img class="idp-logo" src="./assets/images/idp/oauth.svg" alt="oauth" />

    <div class="text-container">
      <span class="title">Generic OAuth</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'jwt', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'jwt', 'create']
          : []
    "
  >
    <div class="idp-icon">
      <mat-icon class="icon" svgIcon="mdi_jwt" alt="jwt" />
    </div>
    <div class="text-container">
      <span class="title">Generic JWT</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'ldap', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'ldap', 'create']
          : []
    "
  >
    <div class="idp-icon">
      <i class="icon las la-building" svgIcon="mdi_jwt" alt="jwt"></i>
    </div>
    <div class="text-container">
      <span class="title">Active Directory / LDAP</span>
    </div>
  </a>

  <a
    class="item card"
    [routerLink]="
      serviceType === PolicyComponentServiceType.ADMIN
        ? ['/instance', 'provider', 'saml', 'create']
        : serviceType === PolicyComponentServiceType.MGMT
          ? ['/org', 'provider', 'saml', 'create']
          : []
    "
  >
    <img class="idp-logo" src="./assets/images/idp/saml-icon.svg" alt="oauth" />
    <div class="text-container">
      <span class="title">SAML</span>
    </div>
  </a>
</div>
